La aparición de las hojas de estilo en cascada (CSS o Cascading Style Sheet) supuso uno de los avances más importantes que se han hecho en el ámbito del diseño y desarrollo web profesional.
Las hojas de estilo en cascada son un conjunto de reglas que definen el aspecto de los elementos que forman parte de los documentos web, cuya estructura ha sido definida previamente con HTML.
El proceso de modificación o mantenimiento de páginas web es una tarea que puede resultar ser muy sencilla y rápida utilizando hojas de estilo, pero, sin ellas, sería necesario modificar cada uno de los documentos en los que apareciera el elemento cuyo aspecto se desee cambiar.
-Existen tres maneras fundamentales de definir estilos CSS en un documento web:
Mediante el atributo style.
Mediante la etiqueta <style>.
Mediante un archivo “.css” externo.
Definición de estilos mediante el atributo style: este método consiste simplemente en definir los estilos CSS utilizando el atributo style, que se incluye en el elemento en el que se desean aplicar.
Definición de estilos mediante la directiva <style>: otra manera de definir estilos CSS en un documento web consiste en incluirlos dentro de la etiqueta <style>, la cual debe ubicarse dentro de la cabecera del documento <head>.
Los selectores CSS indican los elementos sobre los que se van a aplicar los estilos definidos dentro de ellos.
Definición de estilos mediante un archivo “.css” externo: este es el método más utilizado para definir los estilos CSS que van a afectar a los elementos de un sitio web completo, el cual consiste en implementarlos en un archivo “.css” aparte.
Para enlazar este archivo a cada uno de los documentos web en los que se desee aplicar los estilos definidos en dicho archivo “.css”, es necesario utilizar la directiva <link>.
<[INSERTAR IMAGEN/CÓDIGO]>
Con el atributo rel, se especifica el tipo de relación que existe entre el documento web en cuestión y el archivo externo que se está incorporando, cuya localización se especifica en el atributo href. Si el archivo de estilos se encuentra en el mismo directorio que el documento HTML correspondiente, el valor del atributo href coincidirá con el nombre del archivo “.css”.
Los archivos “.css” son documentos de texto plano (al igual que los documentos “.html”) dentro de los cuales se definen los distintos estilos con la misma sintaxis que cuando se escriben dentro de la directiva <style>, pero sin necesidad de añadir esta etiqueta (ni ninguna otra). En definitiva, cuando se definen estilos CSS en archivos externos, únicamente hay que escribir cada uno de los selectores y las propiedades que se especifican en ellos (incluidas entre llaves {...}).
Los selectores se utilizan cuando se crean estilos CSS en un archivo externo (.css) o bien cuando se incluyen dentro de la directiva <style> (en la cabecera de los documentos web) e informan acerca de qué elemento o elementos van a ser los beneficiaros de los estilos que se definen en los mismos.
Aunque existen muchos más (sobre todo en la nueva especificación CSS3), la mayoría de los sitios web se pueden diseñar utilizando únicamente cuatro tipos de selectores básicos: selectores de etiquetas, selectores descendentes, selectores de clase y selectores id.
Selectores de etiquetas: cuando se definen estilos CSS para un selector de etiquetas, dichos estilos se aplican a todos los elementos del documento web cuya directiva coincida con el nombre del selector. En el caso en el que se deseara aplicar los mismos estilos CSS a varios selectores de etiquetas distintos, bastaría con separar dichos selectores por comas.
<[INSERTAR IMAGEN/CÓDIGO]>
Selectores descendentes: estos selectores se utilizan cuando se desean aplicar estilos CSS a elementos que están dentro de otros, siendo su sintaxis la siguiente:
<[INSERTAR IMAGEN/CÓDIGO]>
También es posible indicar más de dos selectores descendentes.
Selectores de clase: los estilos CSS definidos en un selector de clase se aplican a todos aquellos elementos web que tengan dicha clase asociada en su atributo class (sin el carácter “.”).
A continuación, se muestra la sintaxis básica del uso de este tipo de selectores:
<[INSERTAR IMAGEN/CÓDIGO]>
Los selectores de clase también se pueden utilizar como selectores descendentes.
Con CSS también es posible definir estilos que se apliquen a elementos que tengan asociada una clase determinada y que, a su vez, pertenezcan a un tipo de elemento concreto (etiqueta). Para ello, basta con escribir dicha etiqueta justo delante del selector de clase que corresponda.
Con CSS también se puede definir más de una clase a un elemento web concreto. Para ello, basta con indicar, en su atributo class, cada una de las clases que se desean aplicar a dicho elemento separadas con espacios.
Selectores id: este tipo de selectores se utilizan para definir estilos únicos que se aplicarán a un elemento web concreto. La sintaxis básica del uso de este tipo de selectores es:
<[INSERTAR IMAGEN/CÓDIGO]>
Los estilos definidos en un selector id se aplican al elemento cuyo valor de su atributo id coincida con el nombre del selector (sin el carácter “#”).
Los selectores id también pueden utilizarse como selectores descendentes.
Las hojas de estilo CSS se denominan hojas de estilo en cascada por varias razones:
Las propiedades CCS pueden estar escritas en diferentes lugares (dentro de un atributo style, en un archivo “.css” externo, etc.) y, dependiendo del sitio donde se encuentren, se aplicarán con más o menos prioridad.
Cuando un elemento se encuentra ubicado dentro de otro (por ejemplo un párrafo <p> dentro de un elemento <article>), el elemento hijo
(<p>) también es afectado por las propiedades definidas para el elemento padre (<aside>).
Si las propiedades CSS que se han especificado no entran en conflicto, el navegador las aplica todas. En caso contrario (por ejemplo si el color de un elemento está definido en varios sitios con colores distintos), existen ciertas reglas que informan acerca de qué estilos son los que finalmente se aplican.
Estas son:
Las propiedades definidas en un atributo style son prioritarias a las definidas en una etiqueta <style>.
Las propiedades definidas en una etiqueta <style> son prioritarias a las definidas en una hoja de estilos externa.
Las propiedades definidas en un atributo <style> son prioritarias a las definidas en una hoja de estilos externa.
font-family: determina la fuente de letra a utilizar. Se puede especificar más de una, separadas por comas (“,”) por si el navegador no reconoce la indicada en primer lugar.
font-style: establece el estilo de la fuente que se use. Puede ser: normal, italic u oblique.
font-weight: determina el grosor o peso de la fuente. Sus posibles valores son: “normal”, “bold” (negrita), “bolder”, “lighter”, “100”, “200”, “300”, “400”, “500”, “600”, “700”, “800”, “900”.
font-size: define el tamaño de la fuente y admite distintos tipos de valores:
Tamaños absolutos: “xx-small”, “x-small”, “small”, “medium”, “large”, “x-large” y “xxlarge”.
Tamaños relativos: “larger” y “smaller”.
Unidades de longitud o porcentajes.
Cualquier valor de longitud (absoluto y relativo).
color: especifica el color de un elemento. El valor del color puede indicarse por su nombre en inglés o en formato RGB hexadecimal.
word-spacing: define una cantidad adicional de espacio entre las palabras. Esta cantidad puede expresarse en cualquier unidad de longitud.
letter-spacing: es idéntica a la anterior, salvo que el espacio se establece entre las letras.
text-decoration: permite que el texto sea decorado por uno de estos efectos:
underline: subrayado.
overline: subrayado superior.
line-throught: tachado.
blink: parpadeo
none: valor por defecto. No se produce ningún efecto.
vertical-align: establece la alineación vertical del texto respecto al elemento contenedor o la línea del elemento. Admite porcentajes y las siguientes palabras clave:
baseline: alinea el elemento con la base del elemento padre.
sub: subíndice.
super: superíndice.
top: alinea la parte superior del elemento con el elemento más alto en la línea.
text-top: alinea la parte inferior del elemento con el elemento más bajo en la línea.
middle: el elemento se coloca en la mitad del elemento padre.
bottom: alinea la parte inferior del elemento con el elemento más bajo en la línea.
text-bottom: alinea las partes inferiores del elemento y la fuente del elemento padre.
text-transformation: esta propiedad permite establecer, en el texto, diferentes transformaciones, como son:
capitalize: escribe en mayúsculas el primer carácter de cada palabra.
uppercase: escribe en mayúsculas todos los caracteres de cada palabra.
lowercase: uso de letras pequeñas para los caracteres de cada palabra.
none: no hace nada. Valor por defecto.
text-align: alinea el texto que alberga un contenedor, por lo que solo es aplicable a elementos contenedores o de bloque. Puede tener los siguientes valores: left (izquierda), right (derecha), center (centrado) y justify (justificado).
text-indent: también se aplica a elementos contenedores y determina la sangría de la primera línea del texto.
line-height: establece espacio entre las líneas de un texto. Si el valor es un número, la altura de línea se calcula a partir de la multiplicación del tamaño de fuente por ese valor. Los valores en porcentaje son relativos al tamaño de fuente del elemento. No se permiten los valores negativos.
El modelo de cajas (en inglés box model) es una de las características más importantes de CSS, ya que condiciona el diseño de la inmensa mayoría de los sitios de la WWW.
El box model consiste en el comportamiento CSS que hace que todos los elementos incluidos es un documento web presenten una estructura similar a una caja rectangular.
Esto hace que sea muy fácil controlar el aspecto de cualquier elemento presente en un documento web, contribuyendo a definir la estructura visual de cualquier página web.
El modelo de cajas de CSS establece que todos los elementos web están constituidos por las siguientes partes:
content (contenido): contenido del elemento.
Por ejemplo: las palabras que contiene un párrafo, la imagen contenida dentro de una directiva <img>, etc.
padding (relleno): espacio que hay entre el contenido un borde que lo cierre.
border (borde): línea que encierra el contenido y el relleno.
background-image (imagen de fondo): imagen que aparece detrás del contenido y el relleno.
background-color (color de fondo): color que aparece detrás del contenido y el relleno.
margin (margen): espacio que existe entre la caja y otros elementos adyacentes.
Existen muchas propiedades CSS que permiten modificar diversos parámetros relacionados con cada una de estas partes. Para conocerlas, se puede visitar la página: W3School
A la hora de diseñar y desarrollar una página web, es importante tener en cuenta que, una vez que sea subida a la WWW, esta va a ser accesible desde multitud de dispositivos, tales como pc, móviles, tabletas, etc., por lo que su diseño debe orientarse hacia su correcta visualización en pantallas que van a tener tamaños muy diferentes.
Para esto, es importante tener en cuenta las siguientes consideraciones, relacionadas con la implementación de código CSS que va a afectar a los elementos del sitio web:
Utilizar tamaños relativos (por ejemplo porcentajes) en cualquier propiedad CSS en la que sea necesario especificar alguna medida.
Esto favorecerá a que el tamaño de los elementos se adapte a las dimensiones de la ventana de visualización del dispositivo que corresponda.
Utilizar las denominadas Media Queries que incorpora la nueva especificación CSS3.
En CSS existen las denominadas pseudo-clases, las cuales aportan algo de dinamismo a los estilos que se pueden aplicar a los elementos web, ya que permiten aplicar estilos únicamente cuando se cumplan ciertas condiciones.
Las pseudo-clases se escriben justo después del selector en el que se quieren incluir, según la siguiente sintaxis:
<[INSERTAR IMAGEN/CÓDIGO]>
A continuación, se enumeran algunas de las pseudo-clases más utilizadas en CSS:
:first-child: hace referencia al primer elemento de un tipo determinado que está contenido dentro de otro.
:link: permite establecer estilos en los vínculos que todavía no han sido visitados.
:visited: permite establecer estilos en los enlaces que sí han sido visitados.
:hover: permite especificar el estilo de un elemento cuando el ratón se sitúa sobre él.
:active: permite establecer el aspecto de un elemento cuando se hace clic sobre él.
:focus: permite establecer el estilo de un elemento cuando este tiene el foco.
:lang: permite especificar el aspecto de los elementos de un idioma determinado.
Consejos a tener en cuenta cuando se aplican estilos CSS a los elementos de cualquier sitio web:
Separar el contenido del diseño: el código CSS puede escribirse en un archivo externo, enlazado en la cabecera del documento.
Esto permite separar completamente el contenido (HTML) de la presentación (CSS).
Aprovechar los prefijos de proveedor: a veces, los navegadores ofrecen compatibilidad con estándares que todavía no se han aprobado.
Para usarlos, existen unos prefijos que, añadidos a la propiedad que corresponda, permiten visualizarla de manera confiable en el navegador de que se trate.
Utilizar preprocesadores: este tipo de aplicaciones permiten escribir código con mayor rapidez y posibilidades, adaptándolo posteriormente a un formato óptimo para todo tipo de navegadores. Algunos ejemplos de preprocesadores son: Sass, Stylus y Less.
Depurar el código CSS: existen herramientas que permiten depurar las hojas de estilo que se utilicen en un sitio web, eliminando (entre otras cosas) aquellos fragmentos de código que no se utilicen.
Evitar repeticiones: también es importante evitar redundancias en las hojas de estilo. Esto permitirá, entre otras cosas, hacer que la carga del documento sea más liviana.